<template>
  <div>
    <table border="1" style="width: 100%; border-collapse: collapse;">
      <thead>
        <tr>
          <th>反映或涉及对象</th>
          <th>被举报人或单位级别</th>
          <th>所在单位</th>
          <th>所属单位</th>
          <th>身份证号码或单位代码</th>
          <th>单位/个人</th>
          <th>部职别</th>
          <th>被举报人或单位级别详情</th>
          <th>所在单位详情</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in reportTargets" :key="item.id">
          <td>{{ item.target_name }}</td>
          <td>{{ item.target_level }}</td>
          <td>{{ item.target_unit }}</td>
          <td>{{ item.belong_unit }}</td>
          <td>{{ item.unit_number }}</td>
          <td>{{ item.target_type }}</td>
          <td>{{ item.level_number }}</td>
          <td>{{ item.target_level_detail }}</td>
          <td>{{ item.target_unit_detail }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import axios from 'axios';

export default {
  data() {
    return {
      reportTargets: [] as Array<{
        id: number,
        target_name: string,
        target_level: string,
        target_unit: string,
        belong_unit: string,
        unit_number: string,
        target_type: string,
        level_number: string,
        target_level_detail?: string,
        target_unit_detail?: string
      }>
    };
  },
  created() {
    this.fetchReportTargets();
  },
  methods: {
    async fetchReportTargets() {
      try {
        const response = await axios.get('http://127.0.0.1:8000/api/ReportTarget/');
        this.reportTargets = response.data.results;
        console.log('Report Targets:', this.reportTargets);
      } catch {
      }
    }
  }
};
</script>
<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background-color: white; /* 设置表格背景颜色为白色 */
  color: black; /* 设置文字颜色为黑色 */
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2; /* 保持表头背景颜色不变 */
}

tr:nth-child(even) {
  background-color: #f9f9f9; /* 保持偶数行背景颜色不变 */
}

tr:hover {
  background-color: #f1f1f1; /* 保持悬停背景颜色不变 */
}
</style>
